<template>
  <div class="chart-container app-container nohead">
    <el-alert title=""
      type="warning" :closable="false" class="mb-10" />
    <highcharts :options="chartOptions" :callback="myCallback"
      style="height:530px;margin-top:30px;"></highcharts>
  </div>
</template>

<script>

import { Chart } from "highcharts-vue";
import Highcharts from 'highcharts';
import highchartsWordcloud from 'highcharts/modules/wordcloud'
highchartsWordcloud(Highcharts)
export default {
  name: 'extend-graphDemo-highchartsWordcloud',
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartOptions: {}

    }
  },
  mounted() {
    var text = 'Mountain no ling, river water is exhausted, winter thunder bursts, summer rain and snow, heaven and earth together, is dare and you must.At the same time, it is better to forget the leighton river than to help each other at the same time.';
    var data = text
      .split(/[,\. ]+/g)
      .reduce(function (arr, word) {
        var obj = arr.find(function (obj) {
          return obj.name === word;
        });
        if (obj) {
          obj.weight += 1;
        } else {
          obj = {
            name: word,
            weight: 1
          };
          arr.push(obj);
        }
        return arr;
      }, [])
    this.chartOptions = {
      series: [{
        type: 'wordcloud',
        data: data
      }],
      title: {
        text: '词云图'
      },
      credits: {
        enabled: false
      }
    }
  },

  methods: {
    myCallback() {
      console.log("this is callback function");
    }
  }
}
</script>
